<template>
    <page-layout>
        <template v-slot:header>
            <el-button @click="updateEvt" size="mini" type="primary">保存</el-button>
            <el-button @click="backEvt" size="mini" >返回</el-button>
        </template>
        <el-form :model="userTarget" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item label="用户编码:" prop="id" size="mini">
                        <el-input v-model="userTarget.id"  placeholder="输入用户编码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item label="用户姓名:" prop="name" size="mini">
                        <el-input v-model="userTarget.name"  placeholder="输入用户姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item label="用户密码:" prop="password" size="mini">
                        <el-input v-model="userTarget.password"  placeholder="输入用户密码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item label="用户头像:" prop="photo" size="mini">
                        <el-input v-for="it in photo"
                            :key="it"
                            v-model="userTarget.photo" placeholder="上传用户头像" closable>
                            {{it}}
                            <el-button slot="append" icon="el-icon-upload2" @click="filePickEvt('photo')" />
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" >
                    <el-form-item label="用户性别:" prop="sex" size="mini">
                        <el-select v-model="userTarget.sex" placeholder="请选择">
                            <el-option
                            v-for="item in sex"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item label="生日:" prop="birthday" size="mini">
                        <el-input v-model="userTarget.birthday" type="date" placeholder="选择用户生日"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item label="入职日期:" prop="induction" size="mini">
                        <el-input v-model="userTarget.induction" type="date" placeholder="输入入职日期"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item label="部门:" prop="dept" size="mini">
                        <el-input v-model="userTarget.dept"  placeholder="输入用户部门"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item label="职位:" prop="position" size="mini">
                        <el-input v-model="userTarget.position"  placeholder="输入用户职位"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item label="电话:" prop="phone" size="mini">
                        <el-input v-model="userTarget.phone"  placeholder="输入用户电话"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6">
                    <el-form-item label="用户邮箱:" prop="email" size="mini">
                        <el-input v-model="userTarget.email"  placeholder="输入用户邮箱"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="用户角色：" prop="userTarget">
                        <el-checkbox label="超级管理员" value="initial-role" v-model="arr"></el-checkbox>
                        <el-checkbox label="学生账号" value="ROLE-1660893029755" v-model="arr"></el-checkbox>
                        <el-checkbox label="采购经理角色" value="ROLE-1663224624385" v-model="arr"></el-checkbox>
                        <el-checkbox label="门店店员权限" value="ROLE-1664499685858" v-model="arr"></el-checkbox>
                        <el-checkbox label="店员" value="ROLE-1668137531968" v-model="arr"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="用户地址:" prop="adress" size="mini">
                        <el-input v-model="userTarget.address"  placeholder="输入用户地址"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" v-model="userTarget.remark"  placeholder="输入备注"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </page-layout>
</template>
<script>
import store from '@/store'
import { deCodeApi } from '@/util'
import {roleListApi} from '@/apis/roleApi'
import {getUserInfoApi} from '@/apis/loginApi'
import {userUpdateApi,userAddApi} from '@/apis/userApi'
import { filePicker } from '@/util'
import {  fileUploadApi } from '@/apis/productApi'
export default{
    data(){
        return{
            ruleForm:{},
            rules:{
                id:[{ required: true, message: '请输入用户编码', trigger: 'blur' }],
                name:[{ required: true, message: '请输入用户姓名', trigger: 'blur' }],
                password:[{ required: true, message: '请输入用户密码', trigger: 'blur' }],
                phone:[
                    { required: true, message: '请输入用户电话', trigger: 'blur' },
                    {
                        validator: (_, value, callback) => {
                            if (!(/^1[3-9]\d{9}$/).test(value)) {
                                callback(new Error('请输入正确的手机号码！'))
                            } else {
                                callback()
                            }
                        }
                    }
                ],
            },
            sex:[
                {value:'1',label:'女'},
                {value:'2',label:'男'}
            ],
            userList:{},
            userTarget:{
                state:1
            },
            photo:['选择用户头像'],
            role:[],
            type:[],
            userInfo:{},
            arr:[],
            roleObj:{
                '超级管理员':'initial-role',
                '学生账号':'ROLE-1660893029755',
                '采购经理角色':'ROLE-1663224624385',
                '门店店员权限':'ROLE-1664499685858',
                '店员':'ROLE-1668137531968'
            }
        }
    },
    methods:{
        demo(data){
            console.log(data)
        },
        async getRoleEvt(){
            let roleRes = await roleListApi()
            if(roleRes.code === 200){
                roleRes.data.forEach(it =>{
                    this.role.push(it.name)
                })
            }
        },
        async getuserInfoEvt(id){
            let userInfoRes = await getUserInfoApi(id)
            if(userInfoRes.code === 200){
                this.userTarget = userInfoRes.data
                this.photo = [this.userTarget.photo]
                this.userTarget.sex === 1 ? this.userTarget.sex = '女' : this.userTarget.sex = '男'
            }
        },
        backEvt(){
            this.$router.go(-1)
        },
        async updateEvt(){
            if(!!sessionStorage.getItem('user')){
                let roleList = []
                for(var i in this.arr){
                    roleList.push(this.roleObj[this.arr[i]])
                }
                this.userTarget.role = roleList.join(',')
                console.log(this.userTarget)
                let userUpdateRes = await userUpdateApi(this.userTarget)
                if(userUpdateRes.code === 200){
                    this.$message.success('用户信息保存成功！')
                }else{
                    this.$message('用户信息保存失败')
                }
            }else{
                let roleList = []
                for(var i in this.arr){
                    roleList.push(this.roleObj[this.arr[i]])
                }
                this.userTarget.role = roleList.join(',')
                console.log(this.userTarget)
                let userAddRes = await userAddApi(this.userTarget)
                console.log(userAddRes)
                if(userAddRes.code === 200){
                    this.$message.success('新增用户信息成功！')
                }else{
                    this.$message('新增用户信息失败')
                }
            }
        },
        filePickEvt(type) {
            filePicker(files => {
                let formData = new FormData()
                Array(files.length).fill().forEach((_, i) => {
                    formData.append('file', files[i])
                })
                console.log(formData)
                console.log(files)
                fileUploadApi('user_' + type, formData).then(d => {
                    console.log(d)
                    if (d.code === 200) {
                        this.userTarget[type] = ''
                        this.userTarget[type] = this.userTarget[type].concat(
                            d.data.map(it => it.path)
                        )
                        console.log(this.userTarget[type])
                        this.photo = [this.userTarget[type]]
                    }
                })
            })
        },
    },
    async mounted(){
        let user = sessionStorage.getItem('user')
        if(!!user){
            user = deCodeApi(user).split('---')
            this.getRoleEvt(user[0])
            this.getuserInfoEvt(user[1])
        }
    },
    beforeRouteLeave(to,from,next){
        sessionStorage.removeItem('user')
        next()
    }
}
</script>
<style lang="less">
</style>